<script lang="ts">
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';

	/**
	 * 1. 定义组件 Props（支持类型、尺寸、内容、事件、禁用）
	 * - variant：按钮类型（控制主题色）
	 * - size：按钮尺寸（控制padding、字体）
	 * - icon：图标组件（可选，支持任意Icon组件）
	 * - label：按钮文字（可选）
	 * - disabled：禁用状态（覆盖所有交互）
	 * - onClick：点击事件（禁用时不触发）
	 */
	const {
		children,
		type = 'filled',
		variant = 'info', // info/primary/secondary/success/warning /error
		size = 'md', // sm/md/lg
		icon = '', // 传入Icon组件（如<Icon src="xxx" />）
		iconSize,
		iconColor,
		label = '', // 按钮文字
		labelSize,
		disabled = false,
		onClick = () => {},
		...restProps
	} = $props<
		{
			children?: any;
			type?: 'text' | 'link' | 'ghost' | 'paint' | 'filled';
			variant?: 'info' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
			size?: 'sm' | 'md' | 'lg';
			icon?: string;
			iconSize?: number;
			iconColor?: string;
			label?: string;
			labelSize?: number;
			disabled?: boolean;
			onClick?: (e: MouseEvent) => void;
		} & any
	>();

	// 2. 用Runes管理交互状态（hover/pressed）
	let isHover = $state(false); // 鼠标悬浮状态
	let isPressed = $state(false); // 鼠标按下状态

	// 3. 交互事件处理（禁用时不更新状态）
	const handleMouseEnter = () => {
		if (!disabled) isHover = true;
	};
	const handleMouseLeave = () => {
		if (!disabled) {
			isHover = false;
			isPressed = false; // 离开时重置按下状态
		}
	};
	const handleMouseDown = () => {
		if (!disabled) {
			isPressed = true;
		}
	};
	const handleMouseUp = () => {
		if (!disabled) {
			isPressed = false;
		}
	};

	// 4. 点击事件包装（禁用时不触发）
	const handleClick = (e: MouseEvent) => {
		if (!disabled) onClick(e);
	};

	// 5. 剩余Props（透传原生属性，如id、class等）
</script>

<!-- 按钮容器：动态绑定状态样式 + 透传属性 -->
<button
	class="btn"
	class:btn-text={type === 'text'}
	class:btn-link={type === 'link'}
	class:btn-ghost={type === 'ghost'}
	class:btn-paint={type === 'paint'}
	class:btn-filled={type === 'filled'}
	class:btn--primary={variant === 'primary'}
	class:btn--info={variant === 'info'}
	class:btn--secondary={variant === 'secondary'}
	class:btn--success={variant === 'success'}
	class:btn--warning={variant === 'warning'}
	class:btn--error={variant === 'error'}
	class:btn--sm={size === 'sm'}
	class:btn--md={size === 'md'}
	class:btn--lg={size === 'lg'}
	class:btn--hover={isHover && !disabled}
	class:btn--pressed={isPressed && !disabled}
	class:btn--disabled={disabled}
	{disabled}
	onmouseenter={handleMouseEnter}
	onmouseleave={handleMouseLeave}
	onmousedown={handleMouseDown}
	onmouseup={handleMouseUp}
	onclick={handleClick}
	{...restProps}
>
	<!-- 图标区域：存在IconComponent时渲染 -->
	{#if icon}
		<span class="btn__icon" style:font-size={iconSize ? `${iconSize}px` : null} style:color={iconColor ? `${iconColor}` : null}>
			<Icon src={icon}></Icon>
		</span>
	{/if}

	<!-- 文字区域：存在label时渲染 -->
	{#if label}
		<span
			class="btn__label"
			style:font-size={labelSize ? `${labelSize}px` : null}
			style:line-height={labelSize ? `${labelSize + 2}px` : null}
		>
			{label}
		</span>
	{/if}

	{@render children?.()}
</button>

<style scoped lang="scss">
	// 1. 基础样式：重置默认按钮样式 + 统一过渡
	.btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		border: none;
		border-radius: var(--border-radius);
		font-family: inherit;
		font-weight: 500;
		cursor: pointer;
		outline: none;
		background-size: 10%;
		// 🌟 核心：背景相关属性过渡（控制扩展动画）
		transition:
			background-size 0.3s ease;
		// 🌟 固定背景位置在中心点，避免偏移
		background-position: center;
		background-repeat: no-repeat; // 禁止背景重复

		// 禁用时的基础交互
		&.btn--disabled {
			cursor: not-allowed;			
			background-size: 100%; // 禁用时无扩展，直接满色
			transition: none; // 禁用时取消动画
			opacity: 0.4;
		}
	}

	// 2. 尺寸样式：控制padding、字体大小
	.btn--sm {
		height: 26px;
		padding: 0 8px;
		font-size: 12px;
		line-height: 14px;
		.btn__icon {
			font-size: 14px;
		}
	}
	.btn--md {
		height: 28px;
		padding: 0 10px;
		font-size: 13px;
		line-height: 15px;
		.btn__icon {
			font-size: 15px;
		}
	}
	.btn--lg {
		height: 30px;
		padding: 0 12px;
		font-size: 14px;
		line-height: 16px;
		.btn__icon {
			font-size: 16px;
		}
	}
	// 3. 类型样式：控制背景色、文字色
	.btn-text,
	.btn-ghost {
		&.btn--info {
			color: var(--color-info-600);
			outline: 1px solid var(--color-info-500);
			&.btn--hover {
				// background-color: var(--color-info-200);
				background-color: color-mix(in srgb, var(--color-info-600) 10%, transparent);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, color-mix(in srgb, var(--color-info-600) 10%, transparent));
			}
		}

		&.btn--primary {
			color: var(--color-primary-600);
			outline: 1px solid var(--color-primary-500);
			&.btn--hover {
				background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
				// background-color: var(--color-primary-50);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, color-mix(in srgb, var(--color-primary-500) 10%, transparent));
			}
		}

		&.btn--secondary {
			color: var(--color-secondary-600);
			outline: 1px solid var(--color-secondary-500);
			&.btn--hover {
				// background-color: var(--color-secondary-50);
				background-color: color-mix(in srgb, var(--color-secondary-500) 10%, transparent);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(
					circle,
					color-mix(in srgb, var(--color-secondary-500) 10%, transparent)
				);
			}
		}

		&.btn--success {
			color: var(--color-success-600);
			outline: 1px solid var(--color-success-500);
			&.btn--hover {
				// background-color: var(--color-success-50);
				background-color: color-mix(in srgb, var(--color-success-500) 10%, transparent);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, color-mix(in srgb, var(--color-success-500) 10%, transparent));
			}
		}

		&.btn--warning {
			color: var(--color-warning-600);
			outline: 1px solid var(--color-warning-500);
			&.btn--hover {
				// background-color: var(--color-warning-50);
				background-color: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, color-mix(in srgb, var(--color-warning-500) 10%, transparent));
			}
		}

		&.btn--error {
			color: var(--color-error-600);
			outline: 1px solid var(--color-error-500);
			&.btn--hover {
				// background-color: var(--color-error-50);
				background-color: color-mix(in srgb, var(--color-error-500) 10%, transparent);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, color-mix(in srgb, var(--color-error-500) 10%, transparent));
			}
		}
	}
	.btn-text{
		outline: none !important; 
	}
	.btn-link {
		&.btn--info {
			color: var(--color-info-700);
			&.btn--hover {
				color: var(--color-info-400);
			}
			&.btn--pressed {
				color: var(--color-info-800);
			}
		}

		&.btn--primary {
			color: var(--color-primary-600);

			&.btn--hover {
				color: var(--color-primary-400);
			}
			&.btn--pressed {
				color: var(--color-primary-700);
			}
		}

		&.btn--secondary {
			color: var(--color-secondary-600);

			&.btn--hover {
				color: var(--color-secondary-400);
			}
			&.btn--pressed {
				color: var(--color-secondary-700);
			}
		}

		&.btn--success {
			color: var(--color-success-600);

			&.btn--hover {
				color: var(--color-success-400);
			}
			&.btn--pressed {
				color: var(--color-success-700);
			}
		}

		&.btn--warning {
			color: var(--color-warning-600);

			&.btn--hover {
				color: var(--color-warning-400);
			}
			&.btn--pressed {
				color: var(--color-warning-700);
			}
		}

		&.btn--error {
			color: var(--color-error-600);

			&.btn--hover {
				color: var(--color-error-400);
			}
			&.btn--pressed {
				color: var(--color-error-700);
			}
		}
	}
	.btn-paint {		
		&.btn--info {
			color: var(--color-info-600);
			background-color: color-mix(in srgb, var(--color-info-500) 10%, transparent);
			outline: 1px solid var(--color-info-500);
			&.btn--hover {
				background-color: var(--color-info-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-info-400) 100%, transparent 100%);
			}
		}

		&.btn--primary {
			color: var(--color-primary-600);
			background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
			outline: 1px solid var(--color-primary-500);
			&.btn--hover {
				background-color: var(--color-primary-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-primary-400) 100%, transparent 100%);
			}
		}

		&.btn--secondary {
			color: var(--color-secondary-600);
			background-color: color-mix(in srgb, var(--color-secondary-500) 10%, transparent);
			outline: 1px solid var(--color-secondary-500);
			&.btn--hover {
				background-color: var(--color-secondary-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-secondary-400) 100%, transparent 100%);
			}
		}

		&.btn--success {
			color: var(--color-success-600);
			background-color: color-mix(in srgb, var(--color-success-500) 10%, transparent);
			outline: 1px solid var(--color-success-500);
			&.btn--hover {
				background-color: var(--color-success-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-success-400) 100%, transparent 100%);
			}
		}

		&.btn--warning {
			color: var(--color-warning-600);
			background-color: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
			outline: 1px solid var(--color-warning-500);
			&.btn--hover {
				background-color: var(--color-warning-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-warning-400) 100%, transparent 100%);
			}
		}

		&.btn--error {
			color: var(--color-error-600);
			background-color: color-mix(in srgb, var(--color-error-500) 10%, transparent);
			outline: 1px solid var(--color-error-500);
			&.btn--hover {
				background-color: var(--color-error-500);
				color: #fff;
				outline: none;
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-error-400) 100%, transparent 100%);
			}
		}
	}
	.btn-filled {
		color: #fff;
		&.btn--info {
			background-color: var(--color-info-500);
			&.btn--hover {
				background-color: var(--color-info-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-info-300) 100%, transparent 100%);
			}
		}

		&.btn--primary {
			background-color: var(--color-primary-500);
			&.btn--hover {
				background-color: var(--color-primary-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-primary-300) 100%, transparent 100%);
			}
		}

		&.btn--secondary {
			background-color: var(--color-secondary-500);
			&.btn--hover {
				background-color: var(--color-secondary-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(
					circle,
					var(--color-secondary-300) 100%,
					transparent 100%
				);
			}
		}

		&.btn--success {
			background-color: var(--color-success-500);
			&.btn--hover {
				background-color: var(--color-success-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-success-300) 100%, transparent 100%);
			}
		}

		&.btn--warning {
			background-color: var(--color-warning-500);
			&.btn--hover {
				background-color: var(--color-warning-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-warning-300) 100%, transparent 100%);
			}
		}

		&.btn--error {
			background-color: var(--color-error-500);
			&.btn--hover {
				background-color: var(--color-error-400);
			}
			&.btn--pressed {
				background-size: 200%;
				background-image: radial-gradient(circle, var(--color-error-300) 100%, transparent 100%);
			}
		}
	}

	// 4. 内容区域样式：icon和文字的对齐
	.btn__icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn__label {
		display: inline-block;
		white-space: nowrap; // 防止文字折行		
	}
</style>
